<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>图表分析</title>
	<meta name="description" content="">
	<meta name="author" content="xuzewei">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/cloud-admin.css" >
	<link rel="stylesheet" type="text/css" href="css/themes/default.css" id="skin-switcher" >
	<link rel="stylesheet" type="text/css" href="css/responsive.css" >
	<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
	<!-- JQUERY UI-->
	<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
	<!-- DATE RANGE PICKER -->
	<link rel="stylesheet" type="text/css" href="js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
	<!-- JQGRID -->
	<link rel="stylesheet" type="text/css" href="js/jqgrid/css/ui.jqgrid.min.css" />
	<!-- HUBSPOT MESSENGER -->
	<link rel="stylesheet" type="text/css" href="js/hubspot-messenger/css/messenger.min.css" />
	<link rel="stylesheet" type="text/css" href="js/hubspot-messenger/css/messenger-theme-flat.min.css" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
  </head>
<body id="app" ng-app="app" ng-controller="ctrl">
	<!-- HEADER -->
	<jsp:include page="include/header.jsp" />
	<!--/HEADER -->
	<!-- PAGE -->
	<section id="page">
		<!-- SIDEBAR -->
		<jsp:include page="include/sidebar.jsp" />
		<!-- /SIDEBAR -->
		<div id="main-content">
			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">
						<!-- PAGE HEADER-->
						<div class="row">
							<div class="col-sm-12">
								<div class="page-header">
									<!-- BREADCRUMBS -->
									<ul class="breadcrumb">
										<li>
											<i class="fa fa-home"></i>
											<a href="welcome.jsp">Home</a>
										</li>
									</ul>
									<!-- /BREADCRUMBS -->
									<div class="clearfix">
										<h3 class="content-title pull-left">txt上传文件</h3>
									</div>
									<div class="description"></div>
								</div>
							</div>
						</div>
						<!-- /PAGE HEADER -->
								<div class="box border red">
									<div class="box-title">
										<h4><i class="fa fa-bar-chart-o"></i>图表分析</h4>
									</div>
									<div class="box-body clearfix">
										<div id="chart_5" style="height:350px;"></div>
										<div class="separator"></div>
										 <div class="btn-toolbar pull-left">
											<div class="btn-group stackControls">
											   <input type="button" class="btn btn-default" value="显示圆饼分析图" />
											   <input type="button" class="btn btn-default" value="显示柱状分析图" />
											</div>
										</div>
									</div>
								</div>
						<div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
						</div>
					</div><!-- /CONTENT-->
				</div>
			</div>
		</div>
	</section>
	<!--/PAGE -->
	
	<!-- JAVASCRIPTS -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- JQUERY -->
	<script src="js/jquery/jquery-2.0.3.min.js"></script>
	<!-- FLOT CHARTS -->
	<script src="js/flot/jquery.flot.min.js"></script>
	<script src="js/flot/jquery.flot.time.min.js"></script>
    <script src="js/flot/jquery.flot.selection.min.js"></script>
	<script src="js/flot/jquery.flot.resize.min.js"></script>
    <script src="js/flot/jquery.flot.pie.min.js"></script>
    <script src="js/flot/jquery.flot.stack.min.js"></script>
    <script src="js/flot/jquery.flot.crosshair.min.js"></script>
	<!-- JQUERY UI-->
	<script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="bootstrap-dist/js/bootstrap.min.js"></script>
	<!-- DATE RANGE PICKER -->
	<script src="js/bootstrap-daterangepicker/moment.min.js"></script>
	<script src="js/bootstrap-daterangepicker/daterangepicker.min.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- JQGRID -->
	<script type="text/javascript" src="js/jqgrid/js/grid.locale-en.min.js"></script>
	<script type="text/javascript" src="js/jqgrid/js/jquery.jqGrid.min.js"></script>
	<!-- SPARKLINES -->
	<script type="text/javascript" src="js/sparklines/jquery.sparkline.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript" src="js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- HUBSPOT MESSENGER -->
	<script type="text/javascript" src="js/hubspot-messenger/js/messenger.min.js"></script>
	<script type="text/javascript" src="js/hubspot-messenger/js/messenger-theme-flat.js"></script>
	<script type="text/javascript" src="js/hubspot-messenger/js/messenger-theme-future.js"></script>
	<!-- ANGULAR-LIBRARY -->
	<script src="angular-1.5.0-rc.2/angular.js"></script>
	<script src="js/script.js"></script>
	<script src="js/charts.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="include/common.js"></script>
	<script>
	var app = angular.module("app", []);
	app.controller('ctrl', function($scope, $http, $httpParamSerializer, $injector, $window) {
		
        /* Bars with controls */
        $scope.reload = function() {
			var stack = 0;
			//圆饼数据
			var data = [  
			     		   { label: "苹果",  data: 10},  
			    		   { label: "香蕉",  data: 30},  
			    		   { label: "西瓜",  data: 90},  
			    		   { label: "菠萝",  data: 110}  
			    		 ];
			//柱状数据
			var d4 = [ 
				{ label: "香蕉", data: [ [0,14], [1, 13], [2, 11], [3, 7] ] },
				{ label: "西瓜", data: [ [0,8], [1, 22], [2, 33], [3, 11] ] }
			];

            var d1 = [];
            for (var i = 0; i <= 10; i += 1)
                d1.push([i, parseInt(Math.random() * 100)]);

            var d2 = [];
            for (var i = 0; i <= 10; i += 1)
                d2.push([i, parseInt(Math.random() * 30)]);

            var d3 = [];
            for (var i = 0; i <= 10; i += 1)
                d3.push([i, parseInt(Math.random() * 30)]);


            function plotWithOptions() {
                $.plot($("#chart_5"), d4, {
                        series: {
                        	 bars: {
                                 show: true
                             	}
	                        },
	                    bars: {
	                           align: "center",
	                           barWidth: 0.5
	                        },
            			xaxis: {
            				//show: true,
            				//position: 'left',
            				//color: '#ccc',
            				//tickColor: '#fff',
            				ticks: [[0,'1月'],[1,'2月'],[2,'2月'],[3,'4月']],
            				//tickSize: 2,
            				//axisLabelUseCanvas: true,
            				//axisLabelFontSizePixels: 12,
            				//axisLabelFontFamily: 'Verdana, Arial',
            				//axisLabelPadding: 10
            			},
            			grid:{
							borderWidth: 0
						},
						colors: ["#70AFC4", "#F0AD4E", "#A8BC7B"],
                    });
            }


         


        /* DEFAULT */
       function plotWithpie() { 
        $.plot($("#chart_5"), data, {
                series: {
                    pie: {
                        show: true,
                        radius: 1, //半径  
                        label: {  
                            show: true,  
                            radius: 2/3,  
                            formatter: function(label, series){  
                                return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';  
                        },  
                        threshold: 0.03  //这个值小于0.03，也就是3%时，label就会隐藏  
                    }  

                    }
                },
                legend: {  
                    show: false //不显示图例  
        		} ,
				colors: ["#D9534F", "#A8BC7B", "#F0AD4E", "#70AFC4", "#DB5E8C", "#FCD76A", "#A696CE"]
            });
        }
	       $(".stackControls input").click(function (e) {
	           e.preventDefault();
	           stack = $(this).val();
	           if (stack== "显示圆饼分析图"){
	           	console.log("我爱你");
	           	plotWithpie();
	           };
	           if(stack== "显示柱状分析图"){
	           	console.log("我想你");
	           	plotWithOptions();
	           };
	       });
	       plotWithpie();
        }
        
        

        
	$scope.logout = function() {
		logout($window);
	};
	});
	</script>

	<script>
	jQuery(document).ready(function() {
		App.init();
		jQuery('#nav_article').click();
		setTimeout(function () {
			var scope = angular.element('#app').scope();
			scope.reload();
		}, 500);
	});
	</script>
	<!-- /JAVASCRIPTS -->
</body>
</html>